<!-- 消息提示 -->
<template>
  <div class="test-page">
    <div style="margin:1rem">

      <ButtonGroup>
        <Button @click="btnInfo('success')">
          标准
        </Button>
        <Button type="success"
                @click="btnInfo('success')">
          消息success
        </Button>
        <Button type="info"
                @click="btnInfo('info')">
          消息info
        </Button>
        <Button type="error"
                @click="btnInfo('error')">
          消息error
        </Button>
        <Button type="warning"
                @click="btnInfo('warning')">
          消息warning
        </Button>
      </ButtonGroup>

      <Button type="text"
              @click="btnInfo('text')">
        内容消息text
      </Button>
      <Button type="dashed"
              @click="btnInfo('all')">
        按钮触发消息提示
      </Button>
      <Button type="primary"
              @click="btnInfo('clear')">
        <Badge dot>
          清除所有消息
        </Badge>
      </Button>

      <notice title="测试消息"
              show
              type="warning"
              style="top:2rem;right:2rem">
        <div style="padding:0.4rem;padding-top:0">
          <Icon type="icon-star" /> 我是自动关闭的
        </div>
      </notice>
    </div>
    <div style="margin:1rem">

      <ButtonGroup>
        <Input v-model="the.frameId"
               class="qw-8"
               cmd="getframeId"
               icon="icon-database"
               @onEvent="btnFramed" />
        <Button type="mark"
                @click="btnFramed('close')">
          关闭指定id窗口
        </Button>
        <Button type="error"
                @click="btnFramed('clear')">
          关闭所有窗口
        </Button>

      </ButtonGroup>

      <Button type="primary"
              @click="btnWin">
        弹窗 primary
      </Button>

      <Button type="primary"
              @click="btnWin('pull')">
        最大弹窗
      </Button>

      <Button @click="btnWin('event')">
        组件事件监听
      </Button>

      <Button @click="btnWin('model')">
        组件窗口 model
      </Button>

      <Button @click="btnWin('render')">
        多彩函数窗口
      </Button>

      <Button @click="btnWin('html')">
        Html窗口
      </Button>

      <Button @click="btnWin('size')">
        Html窗口 指定大小
      </Button>
    </div>

    <Row>
      <Col span="4">
      <b>注销提示</b>
      </Col>
      <Col span="12">
      2
      </Col>
      <Col span="8">
      3
      </Col>
    </Row>

    <div>
      <Modal title="注销提示"
             body="是否需要注销当前用户？"
             :show="the.modal.show"
             @onEvent="ModalEvent">
      </Modal>

      <Button @click="the.modal.show=true">
        打开对话框
      </Button>
      <Button @click="btnConfirm">
        打开订阅对话框
      </Button>

      <Button @click="btnConfirm('error')">
        打开订阅对话框error
      </Button>

      <Button @click="btnConfirm('model')">
        打开订阅组件对话框model
      </Button>

      <Button @click="btnConfirm('icon')">
        打开组件对话框图标Icon
      </Button>
    </div>
  </div>
</template>

<script>
import { reactive, markRaw, h } from '@/components/vue.api';
import { frame, confirm, message, onSubscribeGlobal, Icon, Button } from '@/components'
// 引入页面
import TextPage from './test-form.vue'

export default {

  // components: {},
  // props: {},
  // data () {
  //   return {
  //   };
  // },

  // computed: {},
  // mounted: {},
  // methods: {},
  // created () { }
  setup () {

    const $plus = window.$plus

    //  const $vue = $plus.vue
    // 引入上下文
    // const { ctx } = $vue.getCurrentInstance()

    // const ctx = $plus

    const the = reactive({
      frameId: '',
      modal: {
        show: false
      }
    });

    // 窗口总数
    let framed_count = 0;

    const btnWin = (type) => {

      let _val = null
      switch (type) {

        case 'model':

          //  console.log('model', List)
          _val = {
            title: '组件窗口',
            //body: '<h5>body</h5',
            model: {
              // 进行非全局组件需标记
              component: markRaw(TextPage)
              // props: {
              //   modelValue: { d: 1 },
              // },
              // component: 'TextJson',
            },
            /** 监听窗口回调 */
            onEvent: (_resp) => {
              console.log('win.model', _resp);
            },
            onClose: (_resp) => {
              console.log('win.model.close', _resp);
              // 自定义关闭方法
              _resp.close()
            }
          }

          break;

        case 'render':

          _val = {
            title: '函数组件窗口',
            class: 'test-win-skin',
            move: {
              width: 200,
              height: 300
            },
            show: {
              // 隐藏头部
              // head: false,
              close: false,
            },
            model: {
              props: {
                // class: 'test-win-skin',
                title: '测试组件传参数'
              },

              // 函数组件
              component: (props, { emit }) => {

                /**
                 * named 组件原生命名进行回调触发，
                 * 由于是多窗口模式，需要表面来源的窗口命名
                 * 需要加入 byNamed:当前窗口命名，才能接收
                 * 
                 * */
                let _resp = { cmd: 'init', named: 'render', data: props.title }

                const btn = () => {
                  console.log('btn', _resp)
                  // 来源窗口组件命名
                  _resp.byNamed = win.named
                  emit('onEvent', _resp)
                }

                const btnClose = () => {
                  emit('onEvent', { cmd: 'close', byNamed: win.named })
                }

                const btnTop = () => {
                  emit('onEvent', { cmd: 'top', byNamed: win.named })
                }

                // emit('onEvent', _resp);

                return h('div', [
                  h('button', { onClick: btn }, `${props.title}`),
                  h('Icon', { type: 'icon-cuo', onClick: btnClose }, '调用窗口事件关闭'),
                  h('Icon', { type: 'icon-jiantoushang', onClick: btnTop }, '调用窗口置定')
                ])
                // return () => (
                //   <div>
                //     <span>Hello</span> jsx
                //   </div>
                // )
              }
            },
            /** 监听组件回调 */
            onEvent: (resp) => {
              console.log('win.onEvent', resp);
            },

          }
          break;

        case 'event':
          const _evWin = $plus.frame.open({
            title: '组件窗口',
            model: {
              props: {
                title: 'Btn 测试组件传参数',
              },
              // 函数组件
              component: (props, { emit }) => {


                let _resp = { cmd: 'init', named: 'render', data: props.title }

                const btn = () => {
                  console.log('btn', _resp)
                  // 来源窗口组件命名
                  emit('onEvent', _resp)
                }

                const btnByClose = () => {
                  // 发送关闭窗口命令
                  emit('onEvent', { cmd: 'close', byNamed: _evWin.named })
                }

                const btnClose = () => {
                  console.log('btnClose', typeof _evWin.close)
                  // 直接调用窗口事件关闭
                  _evWin.close && _evWin.close()
                }

                const btnTop = () => {
                  emit('onEvent', { cmd: 'top', byNamed: _evWin.named })
                }

                emit('onEvent', _resp);

                return h('div', [
                  h('Button', { onClick: btn }, `${props.title}`),
                  h('Button', { onClick: btnByClose }, '调用窗口命令关闭'),
                  h('Button', { onClick: btnTop }, '调用窗口置定'),
                  h('Button', { onClick: btnClose }, '窗口关闭事件'),
                ])
                // return () => (
                //   <div>
                //     <span>Hello</span> jsx
                //   </div>
                // )
              }
            },
            /** 监听组件回调 */
            onEvent: (resp) => {
              console.log('win.render', resp);
            }
          })
          break;
        case 'html':
          _val = {
            move: {
              width: 200,
              height: 300
            },
            title: framed_count + 'html窗口',
            body: `<h2>默认窗口:${framed_count}</h2>`,
            model: {
              props: {
                value: 1
              },
              component: 'Input'
            }
          }
          break;
        case 'size':
          _val = {
            title: framed_count + '指定大小',
            body: '<h2>body</h2>',
            move: {
              width: 300,
              height: 300,
              // left: framed_count * 10,
              // top: framed_count * 10
            }
          }
          break;

        case 'pull':
          _val = {
            body: '<h2>body</h2>',
            title: '<b>html</b>全屏窗口',
            max: true,
            show: {
              /** 显示头部栏 */
              //  head: true,
              /** 显示工具栏按钮 */
              //  btn: true,
              /** max 按钮 */
              max: false,
              /** 最小化按钮 */
              // min: false,
            },
            move: {
              width: 300,
              height: 200
            }
          }
          break;

        default:
          frame.open(`网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth`,
            framed_count + '文本弹窗',
            {
              onClose: (opts) => {
                console.log(JSON.stringify(opts))
                // $plus.message.info('点击关闭')
                // 返回当前对话框对象
                confirm({
                  title: '全局订阅事件对话框',
                  body: '<p>是否关闭当前窗口？</p>',
                  // 按钮事件
                  onEvent: (val) => {
                    console.log('JSON.stringify(opts)', val)
                    switch (val.cmd) {
                      case 'ok':
                        // 关闭当前窗口
                        opts.close && opts.close()
                        //对话框确认
                        setTimeout(function () {

                          // $plus.confirm({ show: false })
                          // 异步强制关闭指定窗口，不触发onClose 事件
                          //$plus.frame.close(resp.data.named, true)

                          // 关闭对话框
                          val.close && val.close();
                        }, 2000);

                        break;
                      case 'close':
                      case 'cancel':
                        // 对话框取消
                        // 关闭对话框
                        val.close && val.close();
                        break;
                    }


                    message.info('点击：' + val.cmd)

                    // console.log('ModalEvent', val)
                  }
                })
              }
            })
          break;
      }


      /** 创建一个窗口 */
      const win = _val ? frame.open(_val) : null;
      // 返回当前窗口id,用于更新管理
      if (win && win.finish) {
        the.frameId = win.byNamed
        framed_count = win.data.count
        console.log('open:' + the.frameId, framed_count)
      }


    }

    /**
     * 弹窗事件
     */
    const btnFramed = (cmd) => {
      console.log('btnFramed', cmd)
      let resp
      switch (cmd) {
        case 'close':
          if (the.frameId) {
            console.log(the.frameId)
            resp = frame.close(the.frameId);
            console.log('btnFramed:' + cmd, JSON.stringify(resp))
          }
          break;

        case 'clear':
          resp = frame.clear();
          console.log(JSON.stringify(resp))
          break
      }
    }



    /** 消息框 */
    const btnInfo = (type) => {

      // const message =$plus.message;
      let resp;
      switch (type) {
        case 'clear':
          resp = message.clear()
          break
        case 'error':
          resp = message.error('<b>网络异常提示！</b>来自服务器错误都放假撒发了就爱上了放假啊上的飞机啊了收到付款时间发', {
            pars: 'errorid121212',
            // 不自动关闭
            timeout: 0
          })
          break
        case 'warning':
          resp = message.warning('网络警告提示！', { text: '网络警告内容', pars: { id: 5 } })
          break
        case 'success':
          resp = message.success('成功提示！')
          break
        case 'info':
          resp = message.info('info提示！', {
            text: '消息提示内容',
            pars: '点击传递的参数',
            // 不自动关闭
            timeout: 0
          })
          break
        case 'text':
          resp = message.text('消息提示', {
            text: '消息提示内容',
            pars: '点击传递的参数',
            // 不自动关闭
            timeout: 0
          })
          break
        default:
          resp = message.notice({
            title: '点击标题的参数',
            /** 传入点击标题的参数 */
            pars: 'ddd',
            text: `<p>网页可见区域宽：document.body.clientWidth</p>
网页可见区域高：<b>document.body.clientHeight</b>
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
屏幕可用工作区宽度：window.screen.availWidth`,
            timeout: 80,
            type: 'success' //'info', 'error', 'success', 'warning', 'loading'

          })

      }
      console.log('message', resp)
    }



    /**
     * @param {string} id 收到的事件id
     *  @param {object} data 收到的内容
     *  
     * */
    onSubscribeGlobal(({ id, data }) => {
      console.log('onGlobal:' + id, data)
    })

    /**
     * 对话框按钮触发事件
     */
    const ModalEvent = (val) => {
      console.log('ModalEvent', val)
      switch (val.cmd) {
        case 'ok':
          //对话框确认
          the.modal.show = !the.modal.show
          message.info('点击确认')
          break;
        case 'close':
        case 'cancel':
          // 对话框取消
          the.modal.show = !the.modal.show
          message.info('点击取消')
          break;
      }
    }

    const openModal = () => {
      setTimeout(function () {
        btnConfirm('error')
        // 关闭对话框
        // resp.close()
        // _resp.close()
      }, 300);
    }

    // 订阅方式打开全局对话框
    const btnConfirm = (cmd) => {
      console.log(cmd);
      let _resp = {
        title: '全局订阅事件对话框',
        body: '<p>通过订阅事件调用全局对话框</p><p>Content of dialog</p>',
        // 按钮事件
        onEvent: (resp) => {

          console.log('btnConfirm', resp)
          switch (resp.cmd) {
            case 'ok':
              //对话框确认
              message.success('确认按钮')
              // setTimeout(function () {
              //   // 关闭对话框
              //   resp.close()
              //   // _resp.close()
              // }, 1000);

              break;
            case 'closed':
              // 窗口已关闭通知
              message.warning('窗口已关闭')
              break;
            case 'close':
              // 内部按钮触发关闭
              message.warning('触发close')
              resp.close && resp.close()
              btnConfirm('model');
              break;
            case 'cancel':
              // 对话框关闭按钮触发，0.6.2 版本调整关闭统一方法close()
              message.info('窗口关闭中')
              openModal();
              // 对话框关闭
              resp.close && resp.close()
              break;

            // case 'init':
            //   // 组件自定义事件回传
            //   console.log('mm.init', _resp)
            //   break;
            case 'btnClose':
              // 内部按钮触发关闭
              resp.close && resp.close()
              break;
            default:
              //  console.log('mm.init', _resp)
              message.info('点击：' + resp.cmd);
              break;
          }

          // 调试,部分组件有死循环bug
          // debugger;

        },
        // 自定义按钮
        btns: [{
          cmd: 'cancel',
          text: '不卖了'
        }, {
          cmd: 'ok',
          type: 'primary',
          /** 是否显示加载图标 */
          loading: true,
          text: '继续购买'
        }],
      }

      switch (cmd) {
        case 'icon':
          _resp.body = '使用已注册组件';
          // 隐藏
          _resp.footerHide = true;
          // 组件对话框
          _resp.model = {
            props: {
              //type: ''
            },
            // 注册组件名
            component: markRaw(TextPage)
          }
          break;
        case 'error':
          _resp.type = "error"
          _resp.model = {
            props: {
              title: ' 传入的参数'
            },
            // 调用方式 1 全局已注册的组件名
            // component: 'Text',
            // 调用方式 2 非注册的组件需使用标记
            // component: markRaw(TextPage),
            // 调用方式 3 函数组件
            component: (props, { emit }) => {

              console.log('model.error', props.text)

              const btnClose = () => {
                // 上报初始化事件
                emit('onEvent', { cmd: 'close', close: modalObject.close })
              }

              // 调用渲染函数 创建div，并引入当前注册组件
              return h('div', {}, [
                `Some text comes first.${props.title}`,
                h(Icon, { type: 'icon-cuo' }, ''),
                h('button', { onClick: btnClose }, '调用窗口事件关闭'),
                h(TextPage, {
                  someProp: 'foobar'
                })
              ])
            }
          }
          break;

        case 'model':
          _resp.body = 'model';
          //取消关闭事件触发
          _resp.closed = true;
          // 组件对话框
          _resp.model = {
            props: {
              //取消了关闭事件触发
              // closed: true,
              text: '没有关闭按钮，函数组件'
            },
            // 进行组件标记
            //  component: Help,
            // 函数组件
            component: (props, { emit }) => {
              //let _text = props.text || ''

              console.log('model', props.text)

              // 有死循环bug
              //  emit('onEvent', { cmd: 'init3', data: props.text })

              return h('div', `${props.text}`)
              // return () => (
              //   <div>{props.text}</div>
              // )
            }
          }
          break

        default:
          break
      }
      console.log(_resp);
      // 返回当前对话框对象
      let modalObject = confirm(_resp)
      console.log(modalObject, 'confirm')
    }

    return { the, btnWin, btnFramed, ModalEvent, btnInfo, btnConfirm }
  }
}

</script>
<style lang='less'>
.test-page {
  padding: 1rem;
  .test-tools {
    margin-bottom: 1rem;
    height: 2rem;
    line-height: 2rem;

    font-size: 0.7rem;
    vertical-align: middle;
    border-bottom: 1px solid #dcdee2;
  }

  .input-css {
    // border: 1px solid chartreuse;
    width: 50%;
    height: 1.6rem;
    vertical-align: middle;
  }

  .input-pre {
    background-color: #dcdee2;
    display: inline-block;
    vertical-align: middle;
    padding: 0 1rem;
    text-align: center;
  }

  .btnSo {
    vertical-align: middle;
    display: inline-block;
    background-color: chocolate;
    padding: 0 0.4rem;
    color: #fff;
    height: 1.6rem;
    line-height: 1.6rem;
    font-size: 0.7rem;
    margin-left: 0.5rem;
  }
  .qv-row {
    margin: 1rem;
  }
  .qv-col {
    background: rgba(5, 97, 143, 0.7);
  }
  .qv-col:nth-child(2n + 1) {
    background: rgba(0, 153, 229, 0.7);
  }

  .qv-btn-group {
    .qv-btn {
      margin: 0;
    }
  }

  .qv-btn {
    margin: 0.25rem;
  }
}

// 测试皮肤
.test-win-skin {
  background-color: rgba(255, 0, 0, 0.5);
  .qv-drag-top,
  .qv-drag-content {
    background-color: rgb(255, 102, 0);
  }
}
</style>